import {Card, Text, Tag, useAppTheme} from 'tsun-smart-ui';
import {useTranslation} from 'react-i18next';
import {Pressable, View} from 'react-native';
import Signal from '@/components/Signal/4GSignal';
import WifiSignal from '@/components/Signal/WifiSignal';
import StringUtils from '@/utils/StringUtils';
import {DeviceState, DeviceStatus, DeviceStatusType} from '@/enums/devices';
import {type AppEquipmentDTO} from '@/services/api/deviceApi';
import React from 'react';
import FastImageWithSkel from '../FastImageWithSkel';
const DeviceCard = ({
  item,
  onPress,
  className,
}: {
  item: AppEquipmentDTO;
  onPress: () => void;
  className?: string;
}) => {
  const {t} = useTranslation();
  const theme = useAppTheme();
  return (
    <Card className={` ${className}`}>
      <Pressable className="flex-row justify-between w-full" onPress={onPress}>
        <View className="flex-row flex-1">
          <FastImageWithSkel
            className=" size-[80] rounded-lg  mr-5"
            source={
              item.coverImage
                ? {
                    uri: StringUtils.toImageUri(item.coverImage),
                  }
                : require('@/assets/imgs/MP3000-1.png')
            }
            resizeMode='cover'
          />
          <View className=" mt-[4.75] flex-1">
            <Text variant="cardTitle" className="mb-2">
              {item.deviceName}
            </Text>
            <Text
              style={{
                color: theme.colors?.neutral?.secondaryTitle,
              }}>{`SN: ${item.deviceSn}`}</Text>
            <View className="flex-row flex-between">
              <Text
                style={{
                  color: theme.colors?.neutral?.secondaryTitle,
                }}>{`${t('device.model')}: ${item.categoryName || '--'}`}</Text>
              {React.createElement(
                item.networkType?.includes('4g') ? Signal : WifiSignal,
                {
                  //@ts-ignore
                  signal:
                    item.deviceStatus === 'offline' ? 0 : item.singleStrength,
                },
              )}
            </View>
          </View>
          <View className="absolute right-0 top-0">
            <Tag type={DeviceStatusType[item.deviceStatus ?? 'offline']}>
              {t(DeviceState[DeviceStatus[item.deviceStatus ?? 'offline']])}
            </Tag>
          </View>
        </View>
      </Pressable>
    </Card>
  );
};

export default DeviceCard;
